import React, { useState, useEffect } from 'react'
import { Button, Result, Card, Grid, Picker, Toast } from 'antd-mobile'
import { SmileOutline } from 'antd-mobile-icons'
import { useDataLimit, useStore4SortFiveData, useStore4SevenStarData } from '../../store'

import './index.less'

function PageMe() {

    const [visible, setVisible] = useState(false)
    const pageSize = useDataLimit(state => state.pageSize)
    const setPageSize = useDataLimit(state => state.setPageSize)

    const [disabled, setDisabled] = useState(true)
    const [loading, setLoading] = useState(false)
    const setSortFiveData = useStore4SortFiveData(state => state.setSortFiveData)
    const setSevenStarData = useStore4SevenStarData(state => state.setSevenStarData)

    const initData = async () => {
        setLoading(true)
        try {
            await setSortFiveData(pageSize, true)
            await setSevenStarData(pageSize, true)
        } catch (error) {
            Toast.show({
                icon: 'fail',
                content: `数据查询失败：${error.message || error}`,
            })
        }
        setLoading(false)
        setDisabled(true)
    }

    return (
        <>
            <Card title="Welcome" className="card-margin-top">
                <Result
                    icon={<SmileOutline />}
                    status='success'
                    title='Glad you’re here!'
                    description={<div className='poem'>
                        <div>
                            金光闪闪照乾坤，福星高照喜盈门。
                        </div>
                        <div>
                            财源滚滚似江水，笑看人生处处春。
                        </div>
                    </div>}
                />
                <div className="coin-container">
                    <div className="coin">💰</div>
                    <div className="coin">💰</div>
                    <div className="coin">💰</div>
                    <div className="coin">💰</div>
                    <div className="coin">💰</div>
                    <div className="coin">💰</div>
                    <div className="coin">💰</div>
                    <div className="coin">💰</div>
                </div>
            </Card>
            <Card title="设置" className="card-margin-top">
                <Grid columns={3} gap={8}>
                    <Grid.Item>
                        数据数量：
                    </Grid.Item>
                    <Grid.Item span={2}>
                        拉取{pageSize * 100}条数据&nbsp;&nbsp;<Button size='mini' color='primary' fill='outline' onClick={() => { setVisible(true) }}>修改</Button>
                        <Picker
                            columns={[
                                [
                                    { label: '500条', value: 5 },
                                    { label: '1000条', value: 10 },
                                    { label: '1500条', value: 15 },
                                    { label: '2000条', value: 20 },
                                ]
                            ]}
                            visible={visible}
                            onClose={() => {
                                setVisible(false)
                            }}
                            value={[pageSize]}
                            onConfirm={v => {
                                if (v[0] != pageSize) {
                                    setDisabled(false)
                                }
                                setPageSize(v[0])
                            }}
                        />
                    </Grid.Item>
                    <Grid.Item>
                        本地缓存：
                    </Grid.Item>
                    <Grid.Item span={2}>
                        <Button size='mini' color='primary' disabled={disabled} loading={loading} onClick={initData}>刷新</Button>
                    </Grid.Item>
                </Grid>
            </Card>
        </>
    )
}

export default PageMe